<template>
	<transition name="fade">
		<div
			catchtouchmove="true"
			class="c-overlay"
			v-if="visible"
			v-show="value"
			:style="[
				{
					'z-index': zIndex,
					background,
					'--duration': duration + 'ms',
				},
			]"
			@click="onClickHandle"
			@touchmove.stop.prevent
		></div>
	</transition>
</template>

<script>
export default {
	name: "c-overlay",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: Boolean,
			default: false,
		},
		zIndex: {
			type: Number,
			default: 1000,
		},
		duration: {
			type: Number,
			default: 300,
		},
		background: {
			type: String,
			default: "rgba(0, 0, 0, 0.77)",
		},
	},
	data() {
		return {
			visible: false,
		}
	},
	computed: {},
	methods: {
		onClickHandle() {
			this.$emit("click")
		},
	},
	watch: {
		value: {
			handler(val) {
				if (val) {
					if (!this.visible) {
						this.visible = true
					}
				}
			},
			immediate: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.c-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity var(--duration);
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>
